<!-- 1-2 热门景点-景点详情 -->
<template>
  <view class="content">
    <view class="content-block">
      <view class="block1">
        <!-- 轮播图 -->
        <view class="slideshow">
          <u-swiper :autoplay="false" :list="swiperList" height="249" keyName="url"></u-swiper>
        </view>
        <!-- <view style="width: 100%;">
          <u-parse :content="videoProhibit"></u-parse>
        </view> -->
        <view class="details">
          <!-- 标题栏 -->
          <view class="title">
            <view class="titleName">
              {{ ScenicSpotDetails_.name }}
            </view>
            <view class="hotBox">
              <image class="hotImg"
                     src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/%E8%B7%AF%E5%BE%84%20404.png">
              </image>
              <view class="hotText">
                {{ ScenicSpotDetails_.hot }}
              </view>
            </view>

          </view>
          <!-- 标签 -->
          <view class="block3-item-bqs">
            <view v-for="(ite,idx) in ScenicSpotDetails_.labels" class="block3-item-bq">{{ ite }}</view>
          </view>
          <!-- 地址 -->
          <view class="address">
            <image
                class="addressIcon"
                src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/1-2-1%E6%99%AF%E7%82%B9%E8%AF%A6%E6%83%85/%E8%B7%AF%E5%BE%84%2080%403x.png"></image>
            <!-- 详细地址 -->
            <view class="nav-text2 ellipsis">
              {{ ScenicSpotDetails_.address }}
            </view>
            <view class="nav-text2">
              |
            </view>
            <view class="nav-text2">
              距你{{ Math.ceil(ScenicSpotDetails_.distance / 100) / 10 }}km
            </view>

            <view class="nav-text2">
              |
            </view>
            <image
                class="navImg"
                src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/1-2-1%E6%99%AF%E7%82%B9%E8%AF%A6%E6%83%85/%E8%B7%AF%E5%BE%84%2081.png"></image>
            <view class="nav-text" @click="navigationClick">
              导航
            </view>
          </view>
          <!-- 开放时间 -->
          <view class="openingHours">
            <image
                class="openingHoursImg"
                src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/1-2-1%E6%99%AF%E7%82%B9%E8%AF%A6%E6%83%85/%E8%B7%AF%E5%BE%84%2083.png"></image>
            <view class="nav-text2">
              开放时间:
            </view>
            <view class="nav-text2">
              {{ ScenicSpotDetails_.openingHours ? ScenicSpotDetails_.openingHours : '暂无' }}
            </view>
          </view>
        </view>
      </view>

      <view class="block2">
        <!-- 切换推荐玩法、景点介绍、用户须知 -->
        <view class="tab">
          <tui-tab :size="40" :tabs="tabs" backgroundColor="#00c96000" bold color="#999" selectedColor="#4186F5"
                   sliderBgColor="#4186F5" @change="handleChange"></tui-tab>
        </view>
        <!-- 分隔线 -->
        <view class="divider"></view>

        <view v-if="current === 0" class="">
          <view class="taskBig">
            <view v-for="(item, index) in ScenicSpotDetails_.playing" :key="index" class="">
              <view class="taskBox">
                <view v-if="item.isLocked" class="overlay"></view>
                <view class="taskLeft">
                  <view class="textBox">
                    <view class="signBox">
                      <image
                          class="signImg"
                          src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/1-2-1%E6%99%AF%E7%82%B9%E8%AF%A6%E6%83%85/%E7%BB%84%2072.png">
                      </image>
                      <view class="signIndex">
                        {{ index + 1 }}
                      </view>
                    </view>
                    <view class="title">
                      {{ item.title }}
                    </view>
                  </view>
                  <view v-if="item.content" :class="{ 'locked-content': item.isLocked }"
                        class="contentBox">
                    {{ item.content }}
                  </view>
                </view>
                <view :class="{ 'locked-content': item.isLocked }" class="taskRight">
                  <image :src="item.picture" class="taskRightImg"></image>
                </view>
                <view v-if="item.isLocked" class="lock">
                  <view v-if="item.isLocked" class="lock-icon-bg">
                    <view v-if="item.isLocked" class="lock-icon locked-content">
                      <image
                          mode="aspectFill"
                          src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/1-2-1%E6%99%AF%E7%82%B9%E8%AF%A6%E6%83%85/%E9%BB%91%E8%89%B2%E9%94%81%E5%A4%B4.png"></image>
                    </view>
                  </view>
                  <view class="JoinTrip">
                    参与行程，即可在行程中查看
                  </view>
                </view>
              </view>

            </view>
          </view>
        </view>
        <!-- 景点介绍 -->
        <view v-if="current === 1" class="ViewSpot">
          <view class="uParseBox">
            <view v-if="ScenicSpotDetails_.explainVideo.video" class="videoBox">
              <video :src="ScenicSpotDetails_.explainVideo.video" class="video-container"></video>
              <view class="videoLock">
                <view class="videoLockImgBox">
                  <image class="videoLockImg"
                         mode="aspectFill"
                         src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/whiteLock.png"></image>
                </view>

                <view class="videoLockText">
                  参与行程，即可在行程中查看
                </view>
              </view>

            </view>

            <u-parse :content="ScenicSpotDetails_.introduce"></u-parse>
          </view>
        </view>
        <!-- 用户须知 -->
        <view v-if="current === 2" class="userNotes">
          <view class="uParseBox">
            <u-parse :content="ScenicSpotDetails_.playRemark"></u-parse>
          </view>
        </view>
        <!-- 景点服务 -->
        <!-- 				<view class="Scenic-spot-service">
          <view class="text26">
            景点服务
          </view>
        </view> -->
        <!-- 附近推荐 -->
        <view class="nearbyRecommend">
          <view class="title">
            <view class="transverse-line">
            </view>
            <view class="text28">附近推荐</view>
            <view class="transverse-line">
            </view>
          </view>
          <view class="listBox">
            <view class="listLeft">
              <view v-for="(item,index) in popularSiteOne" :key="index" class="">
                <view class="listItem" @click="shopsClick(item.id,item.type)">
                  <view class="imgBox">
                    <view v-if="item.type == 1" class="imgType">餐饮</view>
                    <view v-if="item.type == 2" class="imgType imgTypeOne">住宿</view>
                    <view v-if="item.type == 3" class="imgType imgTypeTwo">零售</view>
                    <view v-if="item.type == 4" class="imgType imgTypeThree">平台</view>
                    <image :src="item.image" class="img"></image>
                  </view>
                  <view class="listName">
                    {{ item.name }}
                  </view>
                  <view class="tagBox">
                    <view v-for="(params,parIndex) in item.label" :key="parIndex" class="">
                      <view class="tagItem">
                        {{ params }}
                      </view>
                    </view>
                  </view>
                  <view class="capita">
                    <view class="">
                      人均:
                    </view>
                    <view class="moneyBox">
                      <view class="icon">
                        ￥
                      </view>
                      <view class="money">
                        {{ item.price }}
                      </view>
                    </view>
                  </view>
                </view>

              </view>
            </view>
            <view class="listRight">
              <view v-for="(item,index) in popularSiteTwo" :key="index" class="">

                <view class="listItem" @click="shopsClick(item.id,item.type)">
                  <view class="imgBox">
                    <view v-if="item.type == 1" class="imgType">餐饮</view>
                    <view v-if="item.type == 2" class="imgType imgTypeOne">住宿</view>
                    <view v-if="item.type == 3" class="imgType imgTypeTwo">零售</view>
                    <image :src="item.image" class="img"></image>
                  </view>
                  <view class="listName">
                    {{ item.name }}
                  </view>
                  <view class="tagBox">
                    <view v-for="(params,parIndex) in item.label" :key="parIndex" class="">
                      <view class="tagItem">
                        {{ params }}
                      </view>
                    </view>
                  </view>
                  <view class="capita">
                    <view class="">
                      人均:
                    </view>
                    <view class="moneyBox">
                      <view class="icon">
                        ￥
                      </view>
                      <view class="money">
                        {{ item.price }}
                      </view>
                    </view>
                  </view>
                </view>

              </view>


            </view>
          </view>

          <view class="separateBox">

          </view>

          <view class="suspensionBox">
            <view class="shareBox">
              <button class="shareButton" open-type='share'>
                <image class="sharImg"
                       src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/shareIcon.png"></image>
                <view class="sharText">
                  分享
                </view>
              </button>
            </view>
            <!-- <view class="shareBox addBox" @click="addClick" v-if="signUp">
              <image src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/addIcon.png"
                class="sharImg">
              </image>
              <view class="sharText">
                加入行程
              </view>
            </view> -->
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import tuiWaterfall from "@/components/thorui/tui-waterfall/tui-waterfall.vue"
import {
  ScenicSpotDetails
} from "@/api/challenge";

export default {
  components: {
    tuiWaterfall
  },
  data() {
    return {
      videoProhibit: "",
      swiperList: [],
      scenicId: "",
      x: '',
      y: '',
      popularSiteOne: [],
      popularSiteTwo: [],
      shop: [],
      images: [],
      lable: [
        '历史文化',
        '红色之旅',
        '民俗风情',
        '村落历史'
      ],
      address: '广东省惠州市惠城区横沥镇...',
      distance: 38,
      openingHours: '开放时间：9:00 ~ 18:00',
      // 景点信息对象
      scenicSpotInfo: {},
      hot: 888,
      name: '大夫第',
      tabs: ['推荐玩法', '景点介绍', '用户须知'],
      playing: [],
      current: 0,
      shop: [],
      ScenicSpotDetails_: [],
      listData: [],
      videoSrc: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/wap2appvsnative.mp4'
    }
  },
  onLoad(data) {
    console.log(data);
    this.scenicId = data.id
    this.x = data.x
    this.y = data.y

    //让富文本视频不能播放
    // let regex =
    // 	/<source\s+src="https:\/\/hzdaoziji\.oss-cn-hangzhou\.aliyuncs\.com\/[^"]+"\s+type="video\/mp4"\s*\/>/g;
    // console.log('输出', this.videoProhibit.replace(regex, ""));
    // this.videoProhibit = this.videoProhibit.replace(regex, "")
  },
  methods: {
    navigationClick() {
      var that = this
      const latitude = Number(that.ScenicSpotDetails_.y)
      const longitude = Number(that.ScenicSpotDetails_.x)
      uni.openLocation({
        latitude: latitude,
        longitude: longitude,
        name: that.ScenicSpotDetails_.address,
        success: function () {
          console.log("success");
        },
      });

    },
    shopsClick(id, type) {
      console.log(id, type);
      uni.navigateTo({
        url: '/pages/popular_destination/peripheryDetails?id=' + id
      });
    },
    handleChange(index) {
      this.current = index.index
      // console.log("打印index：", index)
    },
    handleJoinTrip() {
      // 触发加入行程的方法
      console.log('加入行程被点击');
    },
    // 请求热门景点数据
    _ScenicSpotDetails() {
      ScenicSpotDetails({
        scenicId: this.scenicId,
        x: this.x,
        y: this.y
      }).then(res => {
        this.ScenicSpotDetails_ = res;
        // this.listData = this.ScenicSpotDetails_.shops;
        this.swiperList = []
        if (res.video) {
          this.swiperList.push({
            url: res.video,
            type: 'video'
          })
        }
        if (res.images) {
          res.images.forEach(item => {
            this.swiperList.push({
              url: item,
              type: 'image'
            })
          })
        }
        this.listData = this.shop;
        this.popularSiteOne = []
        this.popularSiteTwo = []
        res.shops.forEach(item => {
          if (this.popularSiteOne.length == this.popularSiteTwo.length) {
            this.popularSiteOne.push(item)
          } else {
            this.popularSiteTwo.push(item)
          }
        })
      })
    },
    // 视频播放事件
    onPlay() {
      console.log('Video is playing');
    },
    // 视频暂停事件
    onPause() {
      console.log('Video is paused');
    }
  },
  mounted() {
    // 页面加载完毕时执行请求数据
    this._ScenicSpotDetails();
  }
}
</script>

<style lang="scss" scoped>
.swiper {
  height: 498rpx;
  background-color: #fff;
}

.swiper-image {
  width: 100%;
  height: auto;
}


.title h1 {
  font-size: 22px;
  /* 增大字体大小*/
  font-weight: bold;
  /* 使字体加粗 */
  color: #333;
  /* 字体颜色 */
  padding-left: 40rpx;
}

.ico image {
  width: 25rpx;
  height: 25rpx;
  padding-left: 100rpx;
}

/* 父容器 */
.title {
  display: flex;
  align-items: center;

}

.hot {
  padding-left: 10rpx;
}

.block3-item-bqs {
  display: flex;
  padding-left: 40rpx;
  padding-top: 20rpx;
}

.block3-item-bq {
  background-color: orange;
  font-size: 25rpx;
  color: #fff;
  padding: 10rpx;
  border-radius: 10rpx;
  margin-right: 30rpx;
}

.address {
  padding-left: 40rpx;
  display: flex;
  /* 使用Flexbox布局 */
  align-items: center;
  /* 垂直居中对齐 */
  padding-top: 30rpx;
  font-size: 28rpx;
}

.addressIcon {
  width: 22rpx;
  height: 24rpx;
}

.ico2 image {
  width: 22rpx;
  height: 24rpx;
}

.ico22 image {
  width: 25rpx;
  height: 25rpx;
  padding-left: 20rpx;
}

.distance {
  padding-left: 20rpx;
}

.openingHours {
  display: flex;
  align-items: center;
  padding-left: 40rpx;
  padding-top: 30rpx;
  padding-bottom: 20rpx;
  font-size: 28rpx;

  .openingHoursImg {
    width: 24rpx;
    height: 24rpx;
  }
}

.navImg {
  width: 24rpx;
  height: 24rpx;
  margin: 0 6rpx 0 10rpx;
}

.nav-text {
  color: #007AFF;
}

.nav-text2 {
  color: #808080;
  padding-left: 10rpx;
}

.hot {
  color: #FF6768;
}

.content {
  background-color: #F2F2F2;
}

.details {
  background-color: #FFFFFF;

  .title {
    display: flex;
    padding-top: 20rpx;
    margin: 0 40rpx;

    .titleName {
      flex: 1;
      font-size: 36rpx;
      font-weight: 800;
    }

    .hotBox {
      width: 200rpx;
      display: flex;
      align-items: center;

      .hotImg {
        width: 32rpx;
        height: 32rpx;
      }

      .hotText {
        font-size: 28rpx;
        color: #ff5e5e;
        margin-left: 8rpx;
      }
    }
  }
}

.tab {
  background-color: #FFFFFF;
}

.block2 {
  padding-top: 30rpx;
}

.ico23 image {
  width: 25rpx;
  height: 25rpx;
}

.divider {
  border-bottom: 1px solid #cccccc;
  /* 分隔线的样式 */
  margin: 0;
  /* 根据需要调整外边距 */
}

.playingMethod {
  position: relative;
  /* 设置相对定位 */
  display: flex;
  /* 使用Flexbox布局 */
  flex-direction: row;
  /* 设置子元素在同一行 */
  align-items: flex-start;
  background-color: #FFFFFF;
  padding: 20px;
}

.text2 {
  font-size: 35rpx;
  /* 增大字体大小，具体数值根据需要调整 */
  font-weight: bold;
  /* 使文本加粗 */
  color: #333;
  /* 设置文本颜色，可以根据需要调整 */
  padding-left: 20rpx;
  /* 保留原有的左边距 */
}

.text3 {
  padding-top: 20rpx;
  width: 420rpx;
  word-wrap: break-word;
  white-space: normal;
}

.picture image {
  width: 220rpx;
  height: 220rpx;
  padding-left: 50rpx;
}


.lock-icon image {
  position: absolute;
  right: 80rpx;
  width: 80rpx;
  top: 00rpx;
  /* 设置锁头图标的尺寸 */
  height: 70rpx;
  /* 设置锁头图标的尺寸 */
  z-index: 6;
}

.lock {
  /* 设置绝对定位 */
  position: absolute;
  top: 50px;
  left: 20px;
  z-index: 5;
}

/* 添加遮罩层的样式 */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(128, 128, 128, 0.1);
  /* 灰色背景，透明度30% */
  /* 黑色背景，透明度30% */
  z-index: 3;
  /* 确保遮罩层在其他内容之上 */
  filter: blur(5px);
  overflow: hidden;
  /* 防止模糊效果超出遮罩层边界 */
}

.locked-content {
  opacity: 0.2;
  /* 设置透明度为 */
  transition: opacity 0.3s;
  /* 添加过渡效果，使透明度变化更加平滑 */
}

.JoinTrip {
  position: relative;
  top: 80rpx;
  /* 向上移动 */
  left: 100rpx;
  /* 向左移动 */
  /* 其他样式 */
}

.JoinTrip {
  display: flex;
  align-items: center;
  /* 垂直居中 */
}

.join-trip-link {
  color: blue;
  /* 文字颜色 */
  text-decoration: underline;
  /* 下划线 */
  cursor: pointer;
  /* 鼠标悬停时显示为手形，表示可点击 */
}

/* 确保链接在移动端设备上可点击区域足够大 */
.join-trip-link:active {
  opacity: 0.7;
  /* 点击时稍微降低透明度，表示按下效果 */
}

.uParseBox {
  background-color: #fff;
  padding: 40rpx;
}

.taskBig {
  width: 100%;
  background-color: #fff;
}

.taskBox {
  display: flex;
  justify-content: space-between;
  font-family: PingFang SC, PingFang SC-Heavy;
  padding: 20rpx 40rpx;
  border-bottom: 2rpx solid #eeeeee;
  position: relative;

  .taskLeft {
    flex: 1;

    .textBox {
      display: flex;
      align-items: center;

      .signBox {
        width: 32rpx;
        height: 32rpx;
        position: relative;

        .signImg {
          width: 100%;
          height: 100%;
        }

        .signIndex {
          position: absolute;
          top: 0rpx;
          left: 10rpx;
          font-size: 20rpx;
          color: #fff;
        }
      }

      .title {
        font-size: 32rpx;
        margin-left: 20rpx;
        color: #212121;
      }
    }

    .contentBox {
      font-size: 24rpx;
      color: #757575;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .taskRight {
    width: 200rpx;
    height: 200rpx;
    margin-left: 40rpx;

    .taskRightImg {
      width: 100%;
      height: 100%;
    }
  }
}


.text-container {
  width: 90%;
  /* 容器宽度 */
  max-width: 600px;
  /* 最大宽度 */
  padding: 20px;
  /* 内边距 */
  border: 1px solid #ddd;
  /* 边框 */
  background-color: #fff;
  /* 背景颜色 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* 阴影效果 */
  text-align: justify;
  /* 文本两端对齐 */
}

.text-container img {
  max-width: 100%;
  /* 图片宽度不超过容器宽度 */
  height: auto;
  /* 高度自适应 */
  display: block;
  /* 图片作为块级元素显示 */
  margin: 0 auto;
  /* 图片水平居中 */
}

.text-container p {
  font-size: 16px;
  /* 段落字体大小 */
  line-height: 1.6;
  /* 行高 */
  margin-bottom: 1em;
  /* 段落外边距 */
}

.text-container a {
  color: #0645ad;
  /* 链接颜色 */
  text-decoration: none;
  /* 去除下划线 */
}

.text-container h1,
.text-container h2,
.text-container h3,
.text-container h4,
.text-container h5,
.text-container h6 {
  font-weight: bold;
  /* 标题加粗 */
  margin-bottom: 0.5em;
  /* 标题外边距 */
}

.rich-text-image {
  /* 图片样式定义 */
  width: 100%;
  /* 根据需要设置图片宽度 */
  /* height: auto; */
  /* 高度自适应 */
  margin: 10px 0;
  /* 上下边距 */
}

.Scenic-spot-service {
  width: 100%;
  height: 360rpx;
  background-color: #FFFFFF;
  margin-top: 35rpx;
}

.text26 {
  padding-top: 30rpx;
  padding-left: 50rpx;
  font-size: 20px;
  font-weight: bold;
}

.nearbyRecommend {


  .title {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 40rpx 0 20rpx 0;

    .transverse-line {
      width: 30px;
      height: 2px;
      background: #212121;
      margin: 0 20rpx;
    }

    .text28 {
      font-size: 40rpx;
      font-weight: 800;
    }
  }

}


.shop {
  background-color: #FFFFFF;
  width: 320rpx;
  margin-left: 10rpx;
  margin-right: 10rpx;
  margin-top: 30rpx;
  border-radius: 10rpx;
}

.falls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.picture2 image {
  width: 100%;
  height: 350rpx;
}

.text30 {
  padding-top: 20rpx;
  padding-left: 20rpx;
  font-size: 30rpx;
}

.HorizontalLayout {
  display: flex;
  flex-wrap: wrap;
  /* 允许换行 */
  padding-top: 20rpx;
  padding-left: 10rpx;
  padding-bottom: 10rpx;
}

.Label-container {
  margin-right: 10rpx;
  margin-top: 10rpx;
}

.text32 {
  padding-top: 30rpx;
  padding-left: 20rpx;
}

.text33 {
  padding-top: 30rpx;
  padding-left: 30rpx;
  color: red;
}

.text34 {
  color: red;
  padding-top: 15rpx;
  font-size: 48rpx;
  padding-left: 10rpx;
  font-weight: bold;
}


.videoBox {
  position: relative;
  margin-bottom: 20rpx;

  .video-container {
    width: 100%;
    /* 宽度100%，占满容器 */
    height: 372rpx;

    /* 高度自适应，根据视频宽高比 */
  }

  .videoLock {
    position: absolute;
    width: 100%;
    height: 100%;
    background: black;
    top: 0rpx;
    left: 0rpx;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .videoLockImgBox {
      width: 52rpx;
      height: 60rpx;
      margin-bottom: 20rpx;

      .videoLockImg {
        width: 52rpx;
        height: 60rpx;
      }
    }

    .videoLockText {
      font-family: PingFang SC, PingFang SC-Regular;
      color: #fff;
      font-size: 28rpx;
    }
  }
}


.price {
  display: flex;
  /* 使用Flexbox布局 */
  padding-top: 20rpx;
  padding-bottom: 20rpx;
}

.separateBox {
  padding-bottom: 120rpx;
}

.suspensionBox {
  width: 100%;
  height: 100rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  display: flex;
  color: white;
  font-size: 32rpx;

  .shareBox {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FF9804;

    .shareButton {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #FF9804;
      color: #fff;
    }

    .sharImg {
      width: 40rpx;
      height: 40rpx;
    }

    .sharText {
      margin-left: 12rpx;
    }

  }

  .addBox {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #4286F5;
  }

  .finish {
    flex: 1;
    height: 100%;
    line-height: 100rpx;
    text-align: center;
    background: #cccccc;

  }
}


.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 360rpx;
}

.listBox {
  display: flex;
  padding: 32rpx;
  background-color: #f2f2f2;
}

.listLeft {
  margin-right: 32rpx;
}

.listItem {
  width: 326rpx;
  background: #ffffff;
  border-radius: 20rpx;
  box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.10);
  margin-bottom: 32rpx;
}

.imgBox {
  width: 100%;
  position: relative;
  border-radius: 20rpx 20rpx 0 0;

  .imgType {
    width: 92rpx;
    height: 40rpx;
    border-radius: 20rpx 0rpx 20rpx 0rpx;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #ff9802;
    text-align: center;
    color: #fff;
    font-size: 24rpx;
    line-height: 40rpx;
    z-index: 10;
  }

  .imgTypeOne {
    background-color: #4186f5;
  }

  .imgTypeTwo {
    background-color: #8abc10;
  }

  .imgTypeThree {
    background-color: #ff0000;
  }

  .img {
    width: 100%;
    height: 310rpx;
    border-radius: 20rpx 20rpx 0 0;
  }


}

.listName {
  font-size: 28rpx;
  font-weight: 800;
  margin-left: 20rpx;
}

.tagBox {
  display: flex;
  flex-wrap: wrap;
  margin: 10rpx 0 20rpx 20rpx;

  .tagItem {
    color: #ff9802;
    padding: 0rpx 8rpx;
    border: 1px solid #ff9802;
    border-radius: 4px;
    margin: 0 10rpx 10rpx 0;
  }
}

.capita {
  border-top: 2rpx solid #e3e3e3;
  display: flex;
  align-items: baseline;
  padding: 20rpx 0 20rpx 20rpx;

  .moneyBox {
    display: flex;
    align-items: baseline;
    color: #ff0000;

    .money {
      font-size: 50rpx;
      font-weight: 800;
    }
  }
}
</style>
